<%@page import="com.epcs.util.EpcsDateTimeUtil"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tag"%>

<s:set var="user_info" value="%{#session.USER_INFO}" />




<html>
<head>
<title>EPCS Calendar</title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="css/ace.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/jquery.tagsinput.css" rel="stylesheet" />
<link href="css/trung-style.css" rel="stylesheet" media="screen">
<link href='css/cupertino/jquery-ui.min.css' rel='stylesheet' />

<script src="js/jquery.min.js"></script>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/ace.min.js"></script>
<script src="js/moment.js"></script>
<script src='js/jquery-ui.custom.min.js'></script>
<script src="http://localhost:8081/socket.io/socket.io.js"></script>


</head>
<body>
<s:set var="is_public_event" value="%{#request.IS_PUBLIC_EVENT}" />
<s:set var="is_Main_Event" value="%{#request.IS_MAIN_EVENT}"></s:set>
<s:set var="is_Confirmed_Event" value="%{#request.IS_CONFIRM_EVENT}"></s:set>
	<s:if test="%{#is_Confirmed_Event == 'true'}">
		<s:if test="%{#is_Main_Event == 'true'}">
			 <s:if test="%{#is_public_event == 'true'}">
				<%
					String datetime = EpcsDateTimeUtil.getCurrentIsoByPattern("yyyy-MM-dd'T'HH:mm:ssZ");
					datetime = EpcsDateTimeUtil.convertToJSPDatetime(datetime);
					request.setAttribute("CURRENT_DATETIME", datetime);
				%>
				<div class="index">
					<!--header -->
					<tag:HeaderTag username="${user_info.fullname}">
						<div class="breadcrumbs" id="breadcrumbs" style="margin-bottom: 10px">
							<ul class="breadcrumb" style="margin: 8px;">
								<li><i class="icon-home home-icon"></i>
								<a href="./">Trang chủ</a></li>
								<li class="active">Thông tin chi tiết</li>
							</ul>
							<!-- .breadcrumb -->
						</div>
					</tag:HeaderTag>
					<!--end header -->
			
					<!-- main body -->
					<tag:SideBarTag active_area="3"></tag:SideBarTag>
			
					<div class="main-content">
			
						<!--  Event Detail -->
						<s:set var="event_iter" value="%{#request.EVENT_DETAIL}"></s:set>
						<s:set var="following_event" value="%{#request.FOLLOWING_EVENT}" />
						<s:set var="number_of_following" value="%{#request.NUMBER_OF_FOLLOWING}" />
						
						<s:set var="currentTime" value="%{#request.CURRENT_DATETIME}" ></s:set>
						<fmt:parseDate value="${event_iter.endTime}" pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="end"/>	
						<fmt:parseDate value="${currentTime}" pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="current"/>	
						<fmt:parseDate value="${event_iter.startTime}" pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="start"/>	
						<s:set var="now">${current.time}</s:set>
						<s:set var="finish">${end.time}</s:set>
						<s:set var="begin">${start.time}</s:set>
						<div class="row">
							<div class="col-md-8 boxContent">
								<div class="panel panel-primary">
									<div class="panel-heading">
										<h3 class="panel-title">Thông tin sự kiện</h3>
									</div>
									<div style="font-size: 15;">
										<div class="row deliverEvent" style="margin:0">								
											<div class="row">
												<div class="col-md-9">
													<span style="font-size: 19;color: #428bca;"><b> ${event_iter.title}</b></span>
												</div>
												<div class="col-md-3">
													<s:if test="%{#user_info.username != #event_iter.account.username }">
														<c:if test="${!empty(following_event) }">
															<input type="button"
																onclick="changeFollowing(${following_event.followingId},${event_iter.eventId},this)"
																value="Hủy theo dõi" class="btn btn-danger btn-xs"
																style="width: 125px;" />
														</c:if>
							
														<c:if test="${empty(following_event) }">
															<input type="button"
																onclick="changeFollowing('',${event_iter.eventId},this)"
																value="Theo dõi" class="btn btn-success btn-xs"
																style="width: 125px;" />
														</c:if>
													</s:if>
													<s:if test="%{#now <= #begin}">
														<s:if test="%{#user_info.username == #event_iter.account.username }">
															<a href="EventDetail.do?id=${event_iter.eventId}" class="btn btn-warning btn-xs" style="width: 125px;">Chỉnh sửa</a>
														</s:if>
													</s:if>
												</div>
											</div>
											<div class="row">
												<div class="col-md-4"><b>Người tạo: </b> </div>
												<div class="col-md-8">${event_iter.account.fullname}</div>
											</div>
											<div class="row">
												<div class="col-md-4"><b>Trạng thái hiện tại: </b> </div>
												<div class="col-md-8">
													<s:property value="%{#request.CURRENT_EVENT_STATUS}"/>
												</div>
											</div>
											<div class="row">
												<div class="col-md-4"><b>Thể loại: </b> </div>
												<div class="col-md-8">
													<s:if test="%{#event_iter.eventcategory == ''}">
														Chưa cập nhật
													</s:if>
													<s:else>
														<s:property
															value="%{#event_iter.eventcategory.eventCategoryName}" />
													</s:else>
												</div>
											</div>
											<div class="row">
												<div class="col-md-4"><b>Địa điểm: </b> </div>
												<div class="col-md-8">
												<s:if test="%{#event_iter.location == ''}">
													Chưa cập nhật
												</s:if>
												<s:else>
													${event_iter.location}
												</s:else>
													
												</div>
											</div>
											<div class="row">
												<div class="col-md-4"><b>Số người theo dõi: </b> </div>
												<div class="col-md-8">${number_of_following} người</div>
											</div>
											<div class="row">
												<div class="col-md-4"><b>Thời gian diễn ra: </b> </div>
												<div class="col-md-8">
													<fmt:parseDate value="${event_iter.startTime}" pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="start" />
													<fmt:parseDate value="${event_iter.endTime}" pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="stop" />
													<div class="row">
														<div class="col-md-12">
														Từ 
														<s:if test="%{#event_iter.isAllDayEvent}">
															<fmt:formatDate value="${start}" pattern="'ngày' dd 'tháng' MM 'năm' yyyy" />
														</s:if>
														<s:else>
															<fmt:formatDate value="${start}" 
															pattern="HH 'giờ' mm 'phút, ngày' dd 'tháng' MM 'năm' yyyy" />
														</s:else>
														</div>
													</div>
													<div class="row">
														<div class="col-md-12">
														Đến 
														<s:if test="%{#event_iter.isAllDayEvent}">
															<fmt:formatDate value="${stop}" pattern="'ngày' dd 'tháng' MM 'năm' yyyy" />
														</s:if>
														<s:else>
															<fmt:formatDate value="${stop}" 
															pattern="HH 'giờ' mm 'phút, ngày' dd 'tháng' MM 'năm' yyyy" />
														</s:else>
														</div>
													</div>
												</div>	
											</div>
											<div class="row">
												<div class='deliverLine'></div>
												<div class="col-md-11"><b>Mô tả: </b> 
													<s:if test="%{#event_iter.description != ''}">${event_iter.description}</s:if>
													<s:else>Không có mô tả!</s:else>
												</div>
											</div>
										</div>
									</div>
								</div>
								<!--End  Event Detail -->
								<div class='row'>	
									<div class='row'>
										<div style="text-align: left; padding: 10px;">
											<span class="label label-success arrowed-right arrowed-in arrowed">Nhận xét từ bạn</span>
										</div>
									</div>				
									<div class='row'>
										<input type="hidden" id="eventId" value="${event_iter.eventId}" />
										<textarea rows="3" style="width: 100%; max-height: 100px;" id="commentContent"></textarea>
										<br/>
										<div class='row'>
											<div class='col-md-9'></div>
											<div class='col-md-3'>
											<button type="button" style="margin: 10px; " onclick="commentOnEvent()" class="btn btn-info">
												Bình Luận
											</button>
											</div>
										</div>
									</div>
								</div>
								<s:set var="comment_detail" value="%{#request.COMMENT_LIST}"></s:set>		
								<s:if test="%{#comment_detail.size() > 0}">
								<div class='row' id="commentSquare">
									<div class='row'>
										<div style="text-align: left; padding: 10px;">
											<span class="label label-info arrowed-right arrowed-in arrowed">Các nhận xét</span>
										</div>
									</div>				
									<div class='row'>
										<!--  Comment area -->										
							              <div class="panel-body" id="commentArea" style="min-height: 50px;padding: 5px;">							                																
												<s:iterator var="comment_iter" value="%{#comment_detail}" 
													begin="0" end="%{#comment_detail.size() - 1}" step="1">
													<div id="commentRow_${comment_iter.commentId}" 
														style="margin-bottom: 10px; background-color: #edeff4;">
											 			
											 			<div class="row">
											 				<div class="col-md-11" style="padding: 5px !important;">
											 					${comment_iter.content} 
											 				</div>
											 				<div class="col-md-1">
											 					<c:if test="${comment_iter.account.username ==user_info.username}">
													 				<button type="button" class="btn btn-danger btn-xs" type="button" 
													 						style="font-size: xx-small;"
													 						onclick="deleteComment('${comment_iter.commentId}')">
																		<span class="glyphicon glyphicon-remove"></span>
																	</button>
												 				</c:if>
											 				</div>
											 			</div>
											 			<div class="row">
											 				<div class="col-md-12" style="padding: 5px !important;">
											 					<span style="font: arial,sans-serif;font-weight: bold;color: #226DCC;">
													 				<span class="glyphicon glyphicon-user"></span> 
													 					${comment_iter.account.username}
													 			</span> 
											 				</div>
											 			</div>
												 	</div>					
												</s:iterator>					
							              </div>							            
									</div>
									</div>									
								</s:if>
					            <s:else>
					            	<div class='row' id="commentSquare" style="display: none">
						            	<div class='row'>
											<div style="text-align: left; padding: 10px;">
												<span class="label label-info arrowed-right arrowed-in arrowed">Các nhận xét</span>
											</div>
										</div>				
										<div class='row'>
											<!--  Comment area -->										
								              <div class="panel-body" id="commentArea" 
								              		style="min-height: 50px;padding: 5px;"></div>							            
										</div>
									</div>
					            </s:else>
							</div>
							<div class="col-md-4 boxContent">
								<jsp:include page="RightSideBarArea.jsp"></jsp:include>
								<jsp:include page="RightSideBarArea2.jsp"></jsp:include>
							</div>
						</div>
						
						
						<!-- End cm area -->
					</div>
					<!-- end body -->
				</div>
				
				
				<script type="text/javascript">
					function deleteComment(commentId){
						var commentRow = $("#commentRow_" + commentId);
						var commentArea = $("#commentArea");
						var commentSquare = $("#commentSquare");
			    		$.ajax({  
			    	    	type: "post",  	       
			    	        dataType :"html",  
			    	        url: "DeleteComment.do", 
			    	        data:{	    	        	
			    	        	commentId: commentId,
			    	        },
			    	        success: function(html){
			    	        	if (html == "Deleted"){
			    	        		commentRow.remove();
			    	        		// nếu ko còn comment nào
			    	        		if (commentArea.html().trim() == ''){
			    	        		   // ẩn commentSquare
			    	        			commentSquare.fadeOut();
			    	        		}
			    	        	} else {
			    	        		// ai bit ... de do tinh sau
			    	        	}  	        	
			    	        },
			    	        error: function(jqXHR, textStatus, errorThrown){
			    	            alert('error');
			    	        }
			    	    });
					}
					
					function commentOnEvent(){
						var commentContent = $("#commentContent").val();
						var eventId = $("#eventId").val();
						var commentArea = $("#commentArea");
						var commentSquare = $("#commentSquare");
						if (!commentContent.trim() == ""){
							$.ajax({  
				    	    	type: "post",  	       
				    	        dataType :"html",  
				    	        url: "CreateComment.do", 
				    	        data:{	    	        	
				    	        	content: commentContent,
				    	        	eventId: eventId
				    	        },
				    	        success: function(html){
				    	        	if (html == "error"){
				    	        		alert("Bạn chưa thể bình luận được. Xin thử lại!");
				    	        	} else {
				    	        	    // nếu commentSquare kh6on hiện ra  thì show nó lên
					    	        	if (commentSquare.css('display') == 'none'){
					    	        		commentSquare.fadeIn();
				    	        		}
				    	        	    
				    	        		// nếu ko error thi sho comment len
				    	        		commentArea.append(html);
				    	        		$("#commentContent").val('');
				    	        	}  	        	
				    	        },
				    	        error: function(jqXHR, textStatus, errorThrown){
				    	            alert('error');
				    	        }
				    	    });
						}    		
					}
				</script>
			
				<script>
				    // event nhấn nút theo dõi / hủy theo dõi
					function changeFollowing(id,eventId,button){
					 	// ko cho user bấm nữa
					    button.setAttribute("disabled", "disabled");
					    $.ajax({
				            url: "MostFollowingEvent.do",
				            type: "GET",
				            data: { id: id, eventId: eventId },
				            success: function (data) {
				            	button.removeAttribute("disabled");	
				            	if (data != "Unauthorized"){
				            		if(data != "cancelled"){
				            			var arr = data.split(',');
					            		if(arr[0] != "isExisted"){
					            			if (button.value == "Hủy theo dõi")
						            		{
						            		button.value = "Theo dõi";
						            		button.setAttribute("class","btn btn-success btn-xs");
						            		button.setAttribute("onclick","changeFollowing('',"+eventId+",this)");
						            		//alert("class=" + button.getAttribute("class")+ " onclick="+button.getAttribute("onclick"));
							            	}else if (button.value = "Theo dõi"){
							            		
							            		button.value = "Hủy theo dõi";
							            		button.setAttribute("class","btn btn-danger btn-xs");	
							            		button.setAttribute("onclick","changeFollowing('"+data+"',"+eventId+",this)");
							            		//alert("class=" + button.getAttribute("class")+ " onclick="+button.getAttribute("onclick"));	
							            	}
					            		}else{
					            			alert("Bạn đã theo dõi sự kiện này!");
					            			button.value = "Hủy theo dõi";
						            		button.setAttribute("class","btn btn-danger btn-xs");	
						            		button.setAttribute("onclick","changeFollowing('"+arr[1]+"',"+eventId+",this)");
					            		}
				            		}else{
				            			alert("Sự kiện này đã bị đóng");
				            			window.location.href = "Index.do";
				            		}
				            	} else {
				            		window.location.href = "Index.do";
				            	}
				            	
				            	
				            },
				            error: function (data) {
				                alert("fail");
				            }
				        });
					}
					</script>
			</s:if>
			<s:else>
				<%
			    String redirectURL = "http://localhost:8080/EPCS/";
			    response.sendRedirect(redirectURL);
				%> 
			</s:else>
		</s:if>
		<s:else>
			<%
		    String redirectURL = "http://localhost:8080/EPCS/";
		    response.sendRedirect(redirectURL);
			%> 
		</s:else> 
	</s:if>
	<s:else>
		<%
					String datetime = EpcsDateTimeUtil.getCurrentIsoByPattern("yyyy-MM-dd'T'HH:mm:ssZ");
					datetime = EpcsDateTimeUtil.convertToJSPDatetime(datetime);
					request.setAttribute("CURRENT_DATETIME", datetime);
				%>
				<div class="index">
					<!--header -->
					<tag:HeaderTag username="${user_info.fullname}">
						<div class="breadcrumbs" id="breadcrumbs" style="margin-bottom: 10px">
							<ul class="breadcrumb" style="margin: 8px;">
								<li><i class="icon-home home-icon"></i>
								<a href="./">Trang chủ</a></li>
								<li class="active">Thông tin chi tiết</li>
							</ul>
							<!-- .breadcrumb -->
						</div>
					</tag:HeaderTag>
					<!--end header -->
			
					<!-- main body -->
					<tag:SideBarTag active_area="3"></tag:SideBarTag>
			
					<div class="main-content">
			
						<!--  Event Detail -->
						<s:set var="event_iter" value="%{#request.EVENT_DETAIL}"></s:set>
						<s:set var="following_event" value="%{#request.FOLLOWING_EVENT}" />
						<s:set var="number_of_following" value="%{#request.NUMBER_OF_FOLLOWING}" />
						
						<s:set var="currentTime" value="%{#request.CURRENT_DATETIME}" ></s:set>
						<fmt:parseDate value="${event_iter.endTime}" pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="end"/>	
						<fmt:parseDate value="${currentTime}" pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="current"/>	
						<fmt:parseDate value="${event_iter.startTime}" pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="start"/>	
						<s:set var="now">${current.time}</s:set>
						<s:set var="finish">${end.time}</s:set>
						<s:set var="begin">${start.time}</s:set>
						<div class="row">
							<div class="col-md-8 boxContent">
								<div class="panel panel-primary">
									<div class="panel-heading">
										<h3 class="panel-title">Thông tin sự kiện</h3>
									</div>
									<div style="font-size: 15;">
										<div class="row deliverEvent" style="margin:0">								
											<div class="row">
												<div class="col-md-9">
													<span style="font-size: 19;color: #428bca;"><b> ${event_iter.title}</b></span>
												</div>
												<div class="col-md-3">
					
													<s:if test="%{#now <= #begin}">
														<s:if test="%{#user_info.username == #event_iter.account.username }">
															<a href="EventDetail.do?id=${event_iter.eventId}" class="btn btn-warning btn-xs" style="width: 125px;">Chỉnh sửa</a>
														</s:if>
													</s:if>
												</div>
											</div>
											<div class="row">
												<div class="col-md-4"><b>Người tạo: </b> </div>
												<div class="col-md-8">${event_iter.account.username}</div>
											</div>
											<div class="row">
												<div class="col-md-4"><b>Trạng thái hiện tại: </b> </div>
												<div class="col-md-8">
													Đã bị hủy
												</div>
											</div>
											<div class="row">
												<div class="col-md-4"><b>Số người theo dõi: </b> </div>
												<div class="col-md-8">${number_of_following} người</div>
											</div>
											<div class="row">
												<div class="col-md-4"><b>Thời gian diễn ra: </b> </div>
												<div class="col-md-8">
													<fmt:parseDate value="${event_iter.startTime}" pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="start" />
													<fmt:parseDate value="${event_iter.endTime}" pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="stop" />
													<div class="row">
														<div class="col-md-12">
														Từ 
														<s:if test="%{#event_iter.isAllDayEvent}">
															<fmt:formatDate value="${start}" pattern="'ngày' dd 'tháng' MM 'năm' yyyy" />
														</s:if>
														<s:else>
															<fmt:formatDate value="${start}" 
															pattern="HH 'giờ' mm 'phút, ngày' dd 'tháng' MM 'năm' yyyy" />
														</s:else>
														</div>
													</div>
													<div class="row">
														<div class="col-md-12">
														Đến 
														<s:if test="%{#event_iter.isAllDayEvent}">
															<fmt:formatDate value="${stop}" pattern="'ngày' dd 'tháng' MM 'năm' yyyy" />
														</s:if>
														<s:else>
															<fmt:formatDate value="${stop}" 
															pattern="HH 'giờ' mm 'phút, ngày' dd 'tháng' MM 'năm' yyyy" />
														</s:else>
														</div>
													</div>
												</div>	
											</div>
											<div class="row">
												<div class='deliverLine'></div>
												<div class="col-md-11"><b>Mô tả: </b> 
													<s:if test="%{#event_iter.description != ''}">${event_iter.description}</s:if>
													<s:else>Không có mô tả!</s:else>
												</div>
											</div>
										</div>
									</div>
								</div>
								</div>
								<div class="col-md-4 boxContent">
								<jsp:include page="RightSideBarArea.jsp"></jsp:include>
								<jsp:include page="RightSideBarArea2.jsp"></jsp:include>
							</div>
							</div>
	</s:else> 
								
</body>
</html>